// 一、进入该页面之后首先是请求文章列表数据进行页面渲染
// 1.1 准备好一个默认的请求参数(后台需要)
let allCount = 0; // 声明一个文章总数,后面分页器会用到
const dataObj = {
    pagenum: 1, // 当前页码值
    pagesize: 2, // 每页"要"多少条数据
    cate_id: "", // 分类ID (可选, 可以给值也可以不给值)
    state: "", // (已发布, 草稿) 只能是这2个值
};
// 1.2 因为后面筛选之后要重新请求新的数据,所以需要封装函数,方便后面调用
function loadList() {
    // 1.2.1 调用请求函数
    getArticleList(dataObj, res => {
        // console.log(res);
        // 1.2.2 首先清空页面中原有的数据
        $('.layui-table tbody').empty();
        // 1.2.3 遍历数据,根据新的数据生成标签渲染页面
        res.data.data.forEach((item) => {
            const htmlStr = `
            <tr>
                <td>${item.title}</td>
                <td>${item.cate_name}</td>
                <td>${moment(item.pub_date).format('YYYY-MM-DD hh:mm:ss a')}</td>
                <td>${item.state}</td>
                <th>
                <a href="/iframe/article/publisher/publisher.html?id=${item.Id}" class="layui-btn layui-btn-xs">编辑</a>
                <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                </th>
            </tr>
        `;
            $('.layui-table tbody').append(htmlStr)
        })

        // 1.2.4 得到文章总数之后,赋值给之前声明好的变量,然后生成分页器
        // 判断一下,如果当前页码中没有数据了,就请求上一页的数据,需要手动对页码减1
        if (res.data.data.length == 0) {
            dataObj.pagenum--;
            loadList() // 用上一页的页码重新请求上一页的数据
        }
        allCount = res.data.total
        setPage()
    })
}
loadList()

// 二、获取文章分类
// 2.1 去api中调用相应函数
getCates((res) => {
    // console.log(res);
    // 2.2 清空之前下拉框中的原有数据
    $('select[name=category]').empty();
    // 2.3 默认追加一个所以分类的下拉选项 // 默认选项- 默认获取所有分类
    $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`);
    // 2.4 遍历数据,生成相应的标签,添加到下拉框中
    res.data.data.forEach((item) => {
        const htmlStr = `<option value="${item.Id}" lay-verify="cate">${item.name}</option>`
        $("select[name=category]").append(htmlStr);
    });
    // 2.5 让layui刷新一下form表单
    layui.form.render('select', 'category');
})

// 三、分页器的初始化
function setPage() {
    // 3.1 获取layui的laypage对象
    const laypage = layui.laypage;
    // 3.2 执行一个laypage实例
    laypage.render({
        elem: 'page', // 分页所在的容器标签的ID, 不需要#
        count: allCount, // 数据总数，从服务端得到
        limit: dataObj.pagesize, // 每页显示的条数
        limits: [2, 5, 10, 20], // 下拉组件每个条数
        layout: ['count', 'prev', 'page', 'next', "limit", "skip"],
        curr: dataObj.pagenum, // setPage只要调用, 分页器就会重新生成, 所以要设置起始页
        // 3.3 分页改变时, 回调这个函数执行
        jump: function(obj, first) {
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数
            // laypage.render每次调用初始化分页器, 会让jump马上触发, 调用load后, setPage又调用. laypage.render又执行, jump又调用, load --- 循环卡死. 
            // 首次不执行 -第一次渲染这个分页器的时候first是true, 其他时候是undefined
            if (!first) {
                dataObj.pagenum = obj.curr; // 把页面同步到参数q对象身上
                dataObj.pagesize = obj.limit; // 同步选中当前页有多少条数据到q对象身上
                loadList();
            }
        }
    });
}

// 四、删除文章功能
// 4.1 删除按钮注册点击事件
$('tbody').on('click', '.del', function(e) {
    // 4.2 点击后询问用户是否确定删除
    layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function(index) {
        // 4.3 确定删除后发送请求删除响应数据
        getArticleDelete($(e.target).attr('myid'), res => {
            // 4.4 删除成功后,因为后台的数据已经更新了,如果再调用loadList()重绘页面,会降低页面性能
            // 所有我们只需要将对应的节点移除即可
            // console.log(res);
            // if (res.status == 200) {
            //     $(e.target).parents('tr').remove()
            // }
            loadList()
        })

        layer.close(index);
    });
})

// 五、编辑功能
// 编辑功能是通过href属性携带id直接跳转到编辑页面的,这部分功能直接在发布文章的页面中实现






















/*
var allCount = 0; // 保存的是后台现有的文章总数
let q = {
    pagenum: 1, // 页数(你要第几页的数据)
    pagesize: 2, // 每页"要"多少条数据
    cate_id: "", // 分类ID (可选, 可以给值也可以不给值)
    state: "", // (已发布, 草稿) 只能是这2个值
}

// 1. 获取文章数据列表
function load(){
    artListAPI(q, res => {
        // 2. 把数据铺设到页面上
        let arr = res.data.data;
        // (重要不好理解): 当前页码对应的数据没有了, 虽然分页器能自动跳转到上一页页码, 但是q对象的pagenum还是当前这页, 所以我们需要自己来写js判断,(判断条件就是看当前这页是否还有数据)
        if (arr.length === 0) { // 证明当前这页没有数据了
            q.pagenum--;
            load(); // 再用上一页的页码, 重新请求上一页的数据
            return;
        }
        allCount = res.data.total; // 后台返回的数据总数, 放到了全局变量上
        $(".layui-table tbody").empty();
        arr.forEach(obj => {
            var theTr = `<tr>
                            <td>${obj.title}</td>
                            <td>${obj.cate_name}</td>
                            <td>${obj.pub_date}</td>
                            <td>${obj.state}</td>
                            <th>
                            <a href="/iframe/article/publisher/publisher.html?id=${obj.Id}" class="layui-btn layui-btn-xs">编辑</a>
                            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                            </th>
                        </tr>`;
            $(".layui-table tbody").append(theTr);
        })
        setPage(); // 生成分页器
    })
}
load();

// 2. 分页器 - 初始化
function setPage(){
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page', // 分页所在的容器标签的ID, 不需要#
        count: allCount, // 数据总数，从服务端得到
        limit: q.pagesize, // 每页显示的条数
        limits: [2, 5, 10, 20], // 下拉组件每个条数
        layout: ['count', 'prev', 'page', 'next', "limit", "skip"],
        curr: q.pagenum, // setPage只要调用, 分页器就会重新生成, 所以要设置起始页
        jump: function(obj, first){ // 3. 分页改变时, 回调这个函数执行
            // obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); // 得到每页显示的条数
            // laypage.render每次调用初始化分页器, 会让jump马上触发, 调用load后, setPage又调用. laypage.render有执行, jump又调用, load --- 循环卡死. 
            // 首次不执行 -第一次渲染这个分页器的时候first是true, 其他时候是undefined
            if(!first){
                q.pagenum = obj.curr; // 把页面同步到参数q对象身上
                q.pagesize = obj.limit; // 同步选中当前页有多少条数据到q对象身上
                load();
            }
        }
    });
}

// 4. 类别数据获取和铺设
cateListAPI({}, res => {
    let arr = res.data.data;
    $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类
    arr.forEach(obj => {
        var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
        $("select[name=category]").append(theOption);
    })
    // 让layui刷新一下form表单
    layui.form.render('select', 'category');

    // 5. 分类数据回来了, 再绑定筛选表单的submit事件
    $(".search").on("submit", e => {
        e.preventDefault();
        // 把下拉菜单的值, 放到参数q对象里, 再让load执行一次, 把参数对象q发给后台, 获取新的数据, load铺设页面
        q.cate_id = $("select[name=category]").val();
        q.state = $("select[name=state]").val();
        load();
    })
})


// 6. 删除按钮 - 事件委托 - 点击事件
$(".layui-table tbody").on("click", ".del", function(){ // this: 事件源删除按钮
    // id拔下来  $(this).attr("myid");
    // 调用删除接口通知后台把这条数据删除
    delArtAPI($(this).attr("myid"), res => { // 这个回调函数能进来证明完全成功(响应拦截器里有判断)
        load();
    })
})
*/